<template>
  <a-card title="按钮组">
    <Button type="primary"
            class="mb-12px"
            @click="testClick">倒计时和节流</Button>
  </a-card>
  <a-card title="表单控件">
    <el-form :model="formState">
      <el-form-item label="级联选择器">
        <Cascader :fieldNames="{
            label: 'reason',
            value: 'id',
            children: 'childList'
          }"
                  immediate
                  v-model="formState.reasonIds"
                  url="config/spl-review/list-config"
                  @change="change"></Cascader>
      </el-form-item>
    </el-form>
    <el-form-item label="下拉框选择器">
      <Select :options="OPTIONS"
              :params="{
          columnName: 'skcList',
          menuName: 'bulkInspectionTaskPageForm'
        }"
              v-model="formState.cloths"></Select>
    </el-form-item>
    <el-form-item label="上传图片">
      <UpLoad isHideUpload
              v-model:file-list="formState.fileList"
              :limit="1"
              :fileType="['png']"></UpLoad>
    </el-form-item>
  </a-card>
  <a-card title="反馈组件"> </a-card>

  // <a-card title="公共表单">
    <!-- 弹窗表单 -->
    <ModalForm ref="dlgRef"
               title="弹窗表单"
               :formConfig="FORM_CONFIG_COMMON"></ModalForm>
    <FormComponent :formConfig="FORM_CONFIG"
                   ref="FormComponentRef"
                   hasControl
                   @onSubmit="onSubmit">
    </FormComponent>

    <a-button type="primary"
              @click="onSubmit">提交</a-button>
    <a-button type="primary"
              @click="popFormModel">弹出表单弹窗</a-button>
    //
  </a-card>
  <a-card title="数据展示">
    <div class="w-600px h-100px">
      <Carousel :swiperDate="SWIPER_DATA"
                :sliceUnit="4">
        <!-- <template #content="{ item }">
          <div class="swiper_Item_container">
            <div class="period_Title">{{ item.title }}</div>
            <div><el-rate v-model="item.star" disabled /></div>
          </div>
        </template> -->
      </Carousel>
    </div>
    <Table class="mt-10px"
           :columns="COLUMNS"
           :tableData="TABLE_DATA">
      <template #dateTR="{ record }">
        {{ record.date }}
      </template>
    </Table>
  </a-card>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import {
  FORM_CONFIG,
  FORM_CONFIG_COMMON,
  OPTIONS,
  SWIPER_DATA,
  COLUMNS,
  TABLE_DATA
} from './static'
const commonForm = ref()
const dlgRef = ref()

const popFormModel = async () => {
  dlgRef.value.openDig()
  let result = await commonForm.value.onSubmit()
  if (result) {
    console.log('当前表单数据', result)
  }
}

const FormComponentRef = ref()

const formState = reactive({})

const onSubmit = () => {
  // FormComponentRef.value.onSubmit()
  /* 测试ref */
  FormComponentRef.value
    .validate()
    .then(() => {
      message.success('校验成功!!!')
    })
    .catch(err => {
      console.log('error', err)
    })
}

const change = () => {
  console.log(formState)
}
const testClick = () => {
  console.log(formState.reasonIds)
}
onMounted(() => {
  console.log('sss')
})
</script>

<style scoped>
.bottom {
  width: 100%;
}
.ant-card {
  margin: 12px;
}

.swiper_Item_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 214px;
  border-radius: 11px;
  margin-right: 24px;
  padding: 22px;
  box-sizing: border-box;
  background: rgb(0, 0, 0, 0.02);
}
.period_Title {
  height: 20px;
  font-weight: bold;
  font-size: 20px;
  color: rgb(0, 0, 0, 0.7);
}

.describe {
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 137, 137, 0.7);
}
</style>
